<template>
   <view>
      <!-- 轮播图部分 -->
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(img, index) in swiperImages" :key="index">
          <image :src="img" mode="widthFix" class="swiper-img"></image>
        </swiper-item>
      </swiper>


    <!-- 导航栏，用于切换美食、景点、名人、历史四个板块 -->
    <view class="nav-bar">
      <view class="nav-item" @click="currentTab = 'food'">美食</view>
      <view class="nav-item" @click="currentTab = 'scenic'">景点</view>
      <view class="nav-item" @click="currentTab = 'celebrity'">名人</view>
      <view class="nav-item" @click="currentTab = 'history'">历史</view>
    </view>

    <!-- 根据当前选中的tab展示对应板块内容 -->
    <view v-if="currentTab === 'food'">
      <view class="food-item" v-for="food in foods" :key="food.name">
        <!-- 此处需替换为对应美食真实的图片，例如西安肉夹馍、羊肉泡馍等美食的图片，可使用网络图片链接或者项目内本地图片路径 -->
        <image :src="food.image" mode="aspectFill" class="food-img"></image>
        <text class="food-name">{{ food.name }}</text>
      </view>
    </view>
    <view v-if="currentTab === 'scenic'">
      <view class="scenic-item" v-for="scenic in scenicSpots" :key="scenic.name" @click="showScenicDetails(scenic)">
        <!-- 此处需替换为对应景点真实的图片，像西安兵马俑、西安城墙、大雁塔等景点的图片，格式要求同美食图片 -->
        <image :src="scenic.image" mode="aspectFill" class="scenic-img"></image>
        <text class="scenic-name">{{ scenic.name }}</text>
      </view>
    </view>
    <view v-if="currentTab === 'celebrity'">
      <view class="celebrity-item" v-for="celebrity in celebrities" :key="celebrity.name" @click="showCelebrityDetails(celebrity)">
        <!-- 此处需替换为对应名人真实的图片，比如西安相关名人汉武帝刘彻、唐太宗李世民等的图片，注意图片路径或链接的正确性 -->
        <image :src="celebrity.image" mode="aspectFill" class="celebrity-img"></image>
        <text class="celebrity-name">{{ celebrity.name }}</text>
      </view>
    </view>
    <view v-if="currentTab === 'history'">
      <view class="history-item" v-for="historyInfo in historyContents" :key="historyInfo.title">
        <text class="history-title">{{ historyInfo.title }}</text>
        <text class="history-content">{{ historyInfo.content }}</text>
      </view>
    </view>

    <!-- 景点详情模态框，用于展示景点经纬度并提供高德地图导航按钮 -->
    <view class="modal" v-if="showScenicModal">
      <view class="modal-content">
        <text class="modal-title">{{ currentScenic.name }}</text>
        <image :src="currentScenic.image" mode="aspectFill" class="modal-scenic-img"></image>
        <text class="modal-location">经纬度：{{ currentScenic.latitude }}, {{ currentScenic.longitude }}</text>
        <button @click="navigateToGaodeMap(currentScenic.longitude, currentScenic.latitude, 'driving')">驾车导航</button>
        <button @click="navigateToGaodeMap(currentScenic.longitude, currentScenic.latitude, 'walking')">步行导航</button>
        <button @click="navigateToGaodeMap(currentScenic.longitude, currentScenic.latitude, 'transit')">公交导航</button>
        <button @click="hideScenicModal">关闭</button>
      </view>
    </view>

    <!-- 名人详情模态框，用于展示名人具体信息 -->
    <view class="modal" v-if="showCelebrityModal">
      <view class="modal-content">
        <text class="modal-title">{{ currentCelebrity.name }}</text>
        <image :src="currentCelebrity.image" mode="aspectFill" class="modal-celebrity-img"></image>
        <text class="modal-celebrity-info">{{ currentCelebrity.info }}</text>
        <button @click="hideCelebrityModal">关闭</button>
      </view>
    </view>
  </view>
  <div class="history-container">
      <div v-for="(item, index) in historyContents" :key="index" class="history-item">
        <h3 class="history-title">{{ item.title }}</h3>
        <p class="history-content">{{ item.content }}</p>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入高德地图JavaScript API.
const amapKey = '89ec198ab1be35a512d3943b1da985a9';
const script = document.createElement('script');
script.src = 'https://webapi.amap.com/maps?v=2.0&key=4010925dc2292c1f31a20658ddc08658';
script.async = true;
script.defer = true;
document.head.appendChild(script);

// 轮播图的图片数组，需替换为西安相关的实际图片，例如西安的城市风貌、著名景点外观等能体现西安特色的图片链接
const swiperImages = ref([
  'http://sopw0wy2z.bkt.gdipper.com/bmy.jpg',
  'http://sopw0wy2z.bkt.gdipper.com/dtbyc.webp',
  'http://sopw0wy2z.bkt.gdipper.com/zl.jpg'
]);

// 当前选中的tab，初始为美食板块
const currentTab = ref('food');

// 西安美食数据数组，每个对象包含美食名称、图片链接等信息，需替换为真实的西安美食详情，包括正确的图片路径或链接以及美食的准确名称
const foods = ref([
  {
    name: '肉夹馍',
    image: 'http://sopw0wy2z.bkt.gdipper.com/rjm.png'
  },
  {
    name: '羊肉泡馍',
    image: 'http://sopw0wy2z.bkt.gdipper.com/yrpm.jpg'
  },
  {
    name: '凉皮',
    image: 'http://sopw0wy2z.bkt.gdipper.com/lp.jpg'
  },
  {
    name: '酸汤水饺',
    image: 'http://sopw0wy2z.bkt.gdipper.com/stsj.webp'
  },
  {
    name: '油泼面',
    image: 'http://sopw0wy2z.bkt.gdipper.com/ypm.webp'
  }
]);

// 西安景点数据数组，每个对象包含景点名称、图片链接、经纬度信息等，要替换为准确的西安景点详情，确保图片能正确显示且经纬度数据准确
const scenicSpots = ref([
  {
    name: '兵马俑',
    image: 'http://sopw0wy2z.bkt.gdipper.com/bmy.jpg',
    latitude: 34.390777,
    longitude: 109.274681
  },
  {
    name: '西安城墙',
    image: 'http://sopw0wy2z.bkt.gdipper.com/cq.jpg',
    latitude: 34.271181,
    longitude: 108.941737
  },
  {
    name: '大雁塔',
    image: 'http://sopw0wy2z.bkt.gdipper.com/dyt.jpg',
    latitude: 34.243266,
    longitude: 108.941127
  }
]);

// 西安名人数据数组，每个对象包含名人姓名、图片链接、具体信息等信息，需替换为西安相关的名人详情，图片和人物具体信息都要准确填写
const celebrities = ref([
  {
    name: '唐太宗李世民',
    image: 'http://sopw0wy2z.bkt.gdipper.com/lsm.jpg',
    info: "唐太宗李世民（598年1月28日－649年7月10日），唐朝第二位皇帝，开创了贞观之治，在政治清明、经济复苏、文化繁荣等方面贡献卓越。"
  },
  {
    name: '杜牧',
    image: 'http://sopw0wy2z.bkt.gdipper.com/dm.jpg',
    info: "杜牧（803年－约852年），唐代杰出的诗人、散文家，其诗作题材广泛，风格独特，留下诸多千古名篇。"
  },
  {
    name: '张艺谋',
    image: 'http://sopw0wy2z.bkt.gdipper.com/zym.jpg',
    info: "张艺谋，1950年4月2日出生于陕西西安，中国电影导演、编剧，“第五代导演”代表人物之一，美国波士顿大学、耶鲁大学荣誉博士，北京电影学院特聘教授。"
  },
  {
    name: '闫妮',
    image: 'http://sopw0wy2z.bkt.gdipper.com/yanni.webp',
    info: "闫妮（Yan Ni），女，1971年3月10日出生于陕西省西安市，中国内地影视女演员，中国人民解放军空军政治部电视艺术中心演员，2005年，主演古装剧《武林外传》，凭借佟湘玉一角一炮走红，被人们所熟知。"
  },
  {
    name: '张嘉译',
    image: 'http://sopw0wy2z.bkt.gdipper.com/zyj.webp',
    info: "张嘉益，原名张小童，曾用名张嘉译，1970年4月8日出生于陕西省西安市，祖籍陕西省安康市，中国内地男演员，毕业于北京电影学院。"
  }
]);

// 西安历史相关内容数据数组，每个对象包含标题和具体内容等信息，需根据实际历史资料填充详细准确的内容
const historyContents = ref([
  {
    title: "西安古代历史概述:",
    content: "西安，古代文明的璀璨明珠。西周于此建都丰镐，开启都城辉煌篇章。秦统一六国后，咸阳地区（涵盖今西安部分）尽显帝国气象。西汉立都长安，丝绸之路由此发端，长安成为世界焦点。隋唐时期，长安规模宏大、经济繁荣、文化昌盛，是当时世界最大都市之一，万邦来朝。虽历经五代十国的战乱破坏，此后不再为都，但它始终是地区重要中心，其深厚历史底蕴，如同一座巍峨丰碑，在中国历史长河中永载史册。"
  },
  {
    title: "西安在近代的变迁:",
    content: "在晚清时期，传统的西安城受封建统治的余威和旧体制的束缚。辛亥革命后，西安摆脱封建帝制的直接控制，社会风气逐渐开放。民国时期，西安的交通得到一定改善，陇海铁路的延伸使其对外联系加强。同时，教育方面也有进步，新式学校增多。抗日战争时期，西安作为大后方城市，人口有所增加，工业也在一定程度上有所发展，为抗战做出贡献。"
  },
  {
    title: "西安在历史上的地位",
    content: "进入近代以来，西安经历了一系列的变革，在城市建设、文化传承等方面有着独特的发展轨迹......"
  }
]);

// 控制景点详情模态框显示与否
const showScenicModal = ref(false);
// 当前选中的景点对象
const currentScenic = ref({});

// 控制名人详情模态框显示与否
const showCelebrityModal = ref(false);
// 当前选中的名人对象
const currentCelebrity = ref({});

// 显示景点详情模态框的方法
const showScenicDetails = (scenic) => {
  currentScenic.value = scenic;
  showScenicModal.value = true;
};

// 显示名人详情模态框的方法
const showCelebrityDetails = (celebrity) => {
  currentCelebrity.value = celebrity;
  showCelebrityModal.value = true;
};

// 隐藏景点详情模态框的方法
const hideScenicModal = () => {
  showScenicModal.value = false;
};

// 隐藏名人详情模态框的方法
const hideCelebrityModal = () => {
  showCelebrityModal.value = false;
};

</script>

<style scoped>
.main-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f8f8; /* 页面整体背景色，可根据喜好自行调整 */
  margin: 0 auto;
}
.swiper-img {
  width: 100%;
  height: 250px; /* 轮播图每张图片高度，可按需调整 */
}
.nav-bar {
  display: flex;
  justify-content: space-around;
  background-color: #e6e6e6; /* 导航栏背景色，可按设计风格调整 */
  padding: 10px 0;
  width: 100%;
  margin: 0 auto;
}
.nav-item {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  text-align: center;
}
.nav-item:hover {
  background-color: #d9d9d9; /* 导航栏选项鼠标悬停时的背景色，可按需修改 */
}
.food-item,
.scenic-item,
.celebrity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f8f8; /* 各板块内单个项目的背景色，可调整 */
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}
.food-img,
.scenic-img,
.celebrity-img {
  width: 250px;
  height: 200px;
  border-radius: 50%; /* 修正此处语法错误，原代码 border-color: 50%; 应是 border-radius: 50%; 让图片显示为圆形，可根据设计改变形状 */
  margin-bottom: 8px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.modal-scenic-img {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}
.modal-celebrity-img {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}
button {
  padding: 8px 16px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  margin-top: 10px;
}
.history-container {
  width: 80%; /* 根据页面布局可调整宽度占比 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  background-color: #f9f9f9; /* 背景色，营造柔和氛围 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 淡淡的阴影增加立体感 */
}

.history-item {
  border-bottom: 1px solid #e5e5e5; /* 每个历史项之间用浅灰色线分隔 */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.history-item:last-child {
  border-bottom: none; /* 最后一个历史项去掉底部边框 */
}

.history-title {
  font-size: 20px;
  color: #333; /* 标题颜色 */
  margin-bottom: 10px;
}

.history-content {
  font-size: 16px;
  color: #666; /* 内容颜色稍浅，区分标题和内容 */
  line-height: 1.5; /* 行间距，让文字排版更舒适 */
}
</style>